<template>
    <div class="mui-popover mui-popover-action mui-popover-bottom slg-product-select">
        <div class="select-content">
            <div class="select-summary">
                <div class="img" :style="'background-image: url(' + imgurl + ');'"></div>
                <div class="main">
                    <div class="priceContainer">
                        <template v-if="isscore == 1">
                            <span v-if="fullscorebuy == 0" class="price">¥{{ (old_price / 100).toFixed(2) }} <span
                                    class="score"> + 积分{{(discount_price / 100 * 10).toFixed(0)}}</span></span>
                            <span v-else class="price">积分{{ (discount_price / 100 * 10).toFixed(0) }}</span>
                        </template>
                        <template v-else>
                            <span class="price">¥{{ (price / 100).toFixed(2) }}，送{{ (score / 100 * 10).toFixed(0) }}积分</span>
                        </template>
                    </div>
                    <div class="stock-control">
                        <span class="stock">
                            <label class="label">库存</label>99件</span>
                        <span class="limitTip"></span>
                    </div>
                    <div class="sku-dtips">请选择:
                        &nbsp;{{attr1s[attr1_selected]}}&nbsp;{{attr2s[attr2_selected]}}&nbsp;
                    </div>
                </div>
                <a class="sback" @tap.stop.prevent="closeSelect">
                    <span class="mui-icon mui-icon-close"></span>
                </a>
            </div>
            <div class="select-body">
                <div class="sku">
                    <div v-if="attr1_name && !attr2_name">
                        <div style="min-height: 50px">
                            <span style="padding: 10px 15px">{{attr1_name}}:</span>
                            <div v-for="(attr1,index) of attr1s"
                                 style="display: inline-block; margin: 5px;min-height: 30px">
                                <span v-if="attr1_selected==index"
                                      style="border: 1px solid red; border-radius: 5px;padding: 1px 5px"
                                      @tap="selectAttr1(-1)">{{attr1}}</span>
                                <span v-else style="border: 1px solid #ccc; border-radius: 5px;padding: 1px 5px"
                                      @tap="selectAttr1(index)">{{attr1}}</span>
                            </div>
                        </div>
                    </div>
                    <div v-if="attr1_name && attr2_name">
                        <div style="min-height: 50px">
                            <span style="padding: 10px 15px">{{attr1_name}}:</span>
                            <div v-for="(attr1,index) of attr1s"
                                 style="display: inline-block; margin: 5px;min-height: 30px">
                                <span v-if="attr1_selected==index"
                                      style="border: 1px solid red; border-radius: 5px;padding: 1px 5px"
                                      @tap="selectAttr1(-1)">{{attr1}}</span>
                                <span v-else-if="isAttr1Available(index)"
                                      style="border: 1px solid #ccc; border-radius: 5px;padding: 1px 5px"
                                      @tap="selectAttr1(index)">{{attr1}}</span>
                                <span v-else
                                      style="border: 1px solid #ccc; border-radius: 5px;padding: 1px 5px; background-color: #ccc; color: white">{{attr1}}</span>
                            </div>
                        </div>
                        <div style="clear: both"></div>
                        <div style="min-height: 50px">
                            <span style="padding: 10px 15px">{{attr2_name}}:</span>
                            <div v-for="(attr2,index) of attr2s"
                                 style="display: inline-block; margin: 5px;min-height: 30px">
                                <span v-if="attr2_selected==index"
                                      style="border: 1px solid red; border-radius: 5px;padding: 1px 5px"
                                      @tap="selectAttr2(-1)">{{attr2}}</span>
                                <span v-else-if="isAttr2Available(index)"
                                      style="border: 1px solid #ccc; border-radius: 5px;padding: 1px 5px"
                                      @tap="selectAttr2(index)">{{attr2}}</span>
                                <span v-else
                                      style="border: 1px solid #ccc; border-radius: 5px;padding: 1px 5px; background-color: #ccc; color: white">{{attr2}}</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="footer">
                    <span class="left-text">购买数量
                        <span class="text-right">(限购99件){{buynum}}</span>
                    </span>
                    <div class="auto-rem mui-numbox" data-numbox-step='1' data-numbox-min='1' data-numbox-max='99'>
                        <!-- "-"按钮，点击可减小当前数值 -->
                        <button class="mui-btn mui-numbox-btn-minus" type="button">-</button>
                        <input class="mui-numbox-input" type="number" :value="buynum"
                               @change="buynum = $event.target.value"/>
                        <!-- "+"按钮，点击可增大当前数值 -->
                        <button class="mui-btn mui-numbox-btn-plus" type="button">+</button>
                    </div>
                </div>
                <div v-if="buttonType == 1 || buttonType == 2">
                    <div v-if="canAddToCart()" class="cart-bar" @tap.stop.prevent="addToCart(id)">
                        确定
                    </div>
                    <div v-else class="cart-bar cart-bar-disable">
                        确定
                    </div>
                </div>
            </div>

        </div>
    </div>
</template>

<script>
  import {ajax, apiDomain} from 'assets/js/Lib'

  export default {
    data() {
      return {
        id: '',
        imgurl: '',
        price: 0,
        score: 0,
        isscore: 0,
        fullscorebuy: 0,
        old_price: 0,
        discount_price: 0,
        buynum: 0,
        attr1_name: null,
        attr2_name: null,
        skus: null,
        attr1s: [],
        attr2s: [],
        attr1_selected: -1,
        attr2_selected: -1,
        buttonType: 0,
        selected_sku: null,
      }
    },
    computed: {},
    props: {
      product: {
        type: Object,
        default: {}
      },
      onSelect: {
        type: Function,
      }
    },
    watch: {
      product: function () {
        this.id = this.product.id
        this.imgurl = this.product.imgurl
        this.price = this.product.price
        this.score = this.product.score ? this.product.score : 0
        this.old_price = this.product.old_price
        this.discount_price = this.product.discount_price
        this.isscore = this.product.isscore
        this.fullscorebuy = this.product.fullscorebuy
        this.buynum = 1//this.product.buynum

        console.log('product', this.product);

        this.attr1_name = this.product.attr1_name;
        this.attr2_name = this.product.attr2_name;
        this.skus = this.product.skus;
        if (this.attr1_name) {
          for (let sku of this.skus) {
            if (!this.attr1s.includes(sku.attr1)) {
              this.attr1s.push(sku.attr1);
            }
          }
        }
        if (this.attr2_name) {
          for (let sku of this.skus) {
            if (!this.attr2s.includes(sku.attr2)) {
              this.attr2s.push(sku.attr2);
            }
          }
        }

        if (!this.attr1_name && !this.attr2_name) {
          this.selected_sku = this.skus[0];
        }

        this.buttonType = this.product.buttonType;

        mui('.slg-product-select').popover('show')
      },
      buynum: function () {
        this.$emit('numChange', this.buynum)
      },
      buttonType: function () {
        mui('.slg-product-select').popover('show')
      }
    },
    //实例初始化最之前，无法获取到data里的数据
    beforeCreate() {
    },
    //在挂载开始之前被调用
    beforeMount() {
    },
    //已成功挂载，相当ready()
    mounted() {

    },
    //相关操作事件
    methods: {
      closeSelect: function () {
        mui('.slg-product-select').popover('hide')
      },
      addToCart: function () {
        // console.log('addToCart')
        if (this.buttonType == 1) {
          ajax({
            url: '/api/cart/add',
            data: {
              product_id: this.id,
              buynum: this.buynum,
              sku_id: this.selected_sku.id,
            },
            type: 'GET',
            success: (res) => {
              mui.toast('成功加入购物车')
              mui('.slg-product-select').popover('hide')
            }
          })
        } else if (this.buttonType == 2) {
          this.openPage(`/views/shopcart.html?right_now=1&product_id=${this.product.id}&sku_id=${this.selected_sku.id}&buynum=${this.buynum}`);
        }

      },
      selectAttr1(index) {
        this.attr1_selected = index;
        this.afterSelected();
      },
      selectAttr2(index) {
        this.attr2_selected = index;
        this.afterSelected();
      },
      isAttr1Available(index) {
        if (this.attr2_selected == -1) {
          return true;
        }
        let attr1 = this.attr1s[index];
        let attr2 = this.attr2s[this.attr2_selected];
        for (let sku of this.skus) {
          if (sku.attr1 == attr1 && sku.attr2 == attr2) {
            return true;
          }
        }
        return false;
      },
      isAttr2Available(index) {
        if (this.attr1_selected == -1) {
          return true;
        }
        let attr1 = this.attr1s[this.attr1_selected];
        let attr2 = this.attr2s[index];
        for (let sku of this.skus) {
          if (sku.attr1 == attr1 && sku.attr2 == attr2) {
            return true;
          }
        }
        return false;
      },
      afterSelected() {
        if (this.attr1_name && this.attr2_name) {
          if (this.attr1_selected >= 0 && this.attr2_selected >= 0) {
            for (let sku of this.skus) {
              if (sku.attr1 == this.attr1s[this.attr1_selected] && sku.attr2 == this.attr2s[this.attr2_selected]) {
                if (sku.file) {
                  this.imgurl = apiDomain + '/public/uploads/' + sku.file.savepath + sku.file.savename;
                } else {
                  this.imgurl = this.product.imgurl;
                }
                this.price = sku.price;
                this.score = sku.score;
                this.old_price = sku.old_price;
                this.discount_price = sku.discount_price;

                this.selected_sku = sku;

                if (this.onSelect) {
                    this.onSelect(sku);
                }

                break;
              }
            }
          } else {
            this.imgurl = this.product.imgurl;
          }
        } else if (this.attr1_name) {
          if (this.attr1_selected >= 0) {
            for (let sku of this.skus) {
              if (sku.attr1 == this.attr1s[this.attr1_selected]) {
                if (sku.file) {
                  this.imgurl = apiDomain + '/public/uploads/' + sku.file.savepath + sku.file.savename;
                } else {
                  this.imgurl = this.product.imgurl;
                }
                this.price = sku.price;
                this.score = sku.score;
                this.old_price = sku.old_price;
                this.discount_price = sku.discount_price;

                if (this.onSelect) {
                  this.onSelect(sku);
                }

                break;
              }
            }
          } else {
            this.imgurl = this.product.imgurl;
          }
        }
      },
      canAddToCart() {
        if (this.buynum <= 0) {
          return false;
        }
        if (!this.attr1_name && !this.attr2_name) {
          return true;
        }
        if (this.attr1_name && !this.attr2_name && this.attr1_selected >= 0) {
          return true;
        }
        if (this.attr1_name && this.attr2_name && this.attr1_selected >= 0 && this.attr2_selected >= 0) {
          return true;
        }
        return false;
      },
      openPage: function (url) {
        let pageConfig = {
          "id": url,
          "url": url,
          show: {
            autoShow: true
          },
          waiting: {
            title: '加载中...'
          }
        }
        if (!url) {
          pageConfig.id = "building"
          pageConfig.url = "building.html"
        }

        mui.openWindow(pageConfig)
      },
    }
  }
</script>

<style lang="less">
    .slg-product-select {
        * {
            box-sizing: content-box !important;
        }
    }

    .select-content {
        width: 100%;
        min-height: 8rem;
        background-color: #fff;
        border-radius: 0;
    }

    .select-summary {
        position: relative;
        top: 0;
        left: 0;
        width: 100%;
        box-shadow: 0 1px 0 rgba(0, 0, 0, .05), 0 0.5px 0 rgba(0, 0, 0, .09);
        padding: .333333333333rem;
        height: 2.4375rem;

        .img {
            position: relative;
            top: -1rem;
            background-color: #fff;
            z-index: 10;
            padding: .0625rem;
            border: 1px solid #ddd;
            border-radius: 4px;
            float: left;
            margin-right: 1em;
            height: 3.125rem;
            width: 3.125rem;
            display: -webkit-box;
            -webkit-box-align: center;
            -webkit-box-pack: center;
            background-size: cover !important;
            background-position: center center;
            background-repeat: no-repeat;
        }

        .sback {
            position: absolute;
            color: #8F8F94;
            right: .8rem;
            top: .1rem;

            .mui-icon {
                font-size: .75rem;
            }
        }
    }

    .main {
        overflow: hidden;
        .priceContainer {
            font-size: 0.4375rem;
            line-height: 0.4375rem;
            display: inline-block;
            vertical-align: middle;
            .price {
                padding: 0 .3333333333333rem 0 0;
                display: block;
                vertical-align: middle;
                height: .0 .5625rem;
                line-height: 0.5625rem;
                font-size: .5rem;
                color: #DD2727;

                .score {
                    font-size: .3333333333rem;
                    color: #333333;
                }
            }
        }

        .stock-control {
            font-size: .4rem;
            line-height: .6rem;
            .label {
                font-size: .4rem;
                margin-right: 5px;
            }
        }
        .sku-dtips {
            font-size: .4rem;
            line-height: .6rem;
            margin-right: .38rem;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            word-break: break-all;
            word-wrap: break-word;
            overflow: hidden;
        }
    }

    .select-body {
        width: 100%;
        max-height: 10rem;
        overflow: hidden;
        padding-bottom: 1.4rem;
        padding-top: 20px;
        .sku {
            width: 100%;
            float: left;
            min-height: 2.3rem;
        }
        .footer {
            width: 100%;
            padding-left: .333333333rem;
            padding-right: .333333333rem;
            min-height: 1rem;
            margin-top: .5rem;
            float: left;
            .left-text {
                position: absolute;
                line-height: 1rem;
                font-size: .5rem;
            }
            .text-right {
                font-size: .3rem;
                color: #333333;
                opacity: .5;
            }
        }
        .cart-bar {
            position: absolute;
            bottom: 0;
            width: 100%;
            padding: .2rem 0;
            text-align: center;
            color: #ffffff;
            height: .6rem;
            line-height: .6rem;
            background: #FF9500;
            font-size: .4rem;
        }
        .cart-bar-disable {
            background: #ccc;
        }
    }
</style>
